<template>
  <div>
    <div class="mvplay">
      <div class="title">
        <div
          class="iconfont icon-fanhuipt"
          @click="$router.go(-1), setHide()"
        ></div>
        <p>MV详情</p>
      </div>

      <div class="video" v-if="mplay">
        <video controls :src="mplay.url"></video>
      </div>

      <div class="content" v-if="mlist">
        <van-tabs v-model="active">
          <van-tab title="MV简介">
            <div class="mvsg">
              <div class="mtitle">
                <div class="img">
                  <img :src="mImg.img1v1Url || mlist.cover" />
                </div>
                <div class="mName">
                  <p>{{ mlist.name }}</p>
                  <p>{{ mlist.artistName }}</p>
                </div>

                <div class="icon">
                  <div
                    class="iconfont icon-aixin"
                    v-show="!edit"
                    @click="editIcon"
                  ></div>
                  <div
                    class="iconfont icon-xihuan-wangyiicon"
                    v-show="edit"
                    @click="editIcon"
                  ></div>
                </div>
              </div>

              <div class="desc">
                <p>{{ mlist.alias }}</p>
                <p v-for="(item, index) in mlists" :key="index">
                  {{ item }}
                </p>
              </div>
            </div>
          </van-tab>

          <van-tab title="MV评价">
            <div class="appraise">
              <van-tabs type="card">
                <van-cell is-link @click="showPopup">留言</van-cell>
                <van-tab title="热门评论">
                  <div class="hotComment">
                    <ul>
                      <li v-for="(item, index) in hotCom" :key="index">
                        <div class="left">
                          <img :src="item.user.avatarUrl" />
                        </div>
                        <div class="right">
                          <div class="content">
                            <p>
                              <span> {{ item.user.nickname }}:</span>
                              {{ item.content }}
                            </p>
                          </div>
                          <div class="date">
                            <p>{{ item.timeStr }}</p>

                            <div class="font">
                              <div class="iconfont icon-dianzan" v-show="!item.liked" @click="ehot(item.commentId)"></div>
                              <div class="iconfont icon-dianzan1" v-show="item.liked" @click="ehot(item.commentId)"></div>
                              <span>({{ item.likedCount }})</span>
                            </div>
                          </div>
                        </div>
                      </li>
                    </ul>
                  </div>
                </van-tab>

                <van-tab title="最近评论">
                  <div class="comment">
                    <h3></h3>
                    <ul>
                      <li v-for="(item, index) in com" :key="index">
                        <div class="left">
                          <img :src="item.user.avatarUrl" />
                        </div>
                        <div class="right">
                          <div class="content">
                            <p>
                              <span> {{ item.user.nickname }}:</span>
                              {{ item.content }}
                            </p>
                          </div>
                          <div class="date">
                            <p>{{ item.timeStr }}</p>

                            <div class="font">
                              <div class="iconfont icon-dianzan"></div>
                              <span>({{ item.likedCount }})</span>
                            </div>
                          </div>
                        </div>
                      </li>
                    </ul>
                  </div>
                </van-tab>
              </van-tabs>
            </div>
          </van-tab>

          <van-tab title="歌手其他MV">
            <div class="mSing">
              <ul>
                <router-link
                  v-for="item in singIs"
                  :key="item.id"
                  tag="li"
                  :to="'/mvplay/mvplay?id=' + item.id"
                >
                  <div class="img">
                    <img :src="item.imgurl" alt="" />
                  </div>
                  <p>
                    {{ item.name }}
                  </p>
                </router-link>
              </ul>
            </div>
          </van-tab>
        </van-tabs>
      </div>
    </div>

    <van-popup v-model="show" position="bottom" :style="{ height: '30%' }">
      <van-field
        v-model="message"
        autosize
        row="3"
        label="留言"
        type="textarea"
        placeholder="请输入留言"
      >
        <template #button>
          <van-button size="small" @click="leaveMes(message)" type="primary"
            >发送</van-button
          >
        </template>
      </van-field>
    </van-popup>
  </div>
</template>

<script>
import { getlikeStar } from '../../api/singer';
import {
  getMVDetail,
  getMVPlay,
  getMVSIng,
  getMVComment,
  getTalk,
  getMVAdd,
} from "../../api/video";

export default {
  data() {
    return {
      active: 0,
      mplay: null, //视频播放
      mlist: null, //信息详情
      mlists: null, //信息详情
      mImg: null, //信息详情
      singIs: {
        img1v1Url: null,
      },
      hotCom: null, //评价
      com: null, //评价
      message: null, // 发送评价传递参数
      show: false, //组件按钮
      edit: false,
      editPlayerId:[],
    };
  },
  methods: {
    leaveMes(msg) {
      // console.log();
      getTalk({ t: 1, type: 1, id: this.$route.query.id, content: msg }).then(
        (data) => {
          console.log(data);
          this.com.unshift(data.comments);
        }
      );
      this.message = null;
      this.show = false;
    },
    showPopup() {
      this.show = true;
    },
    setHide() {
      this.$emit("get-hide-play", true);
    },

    // 收藏
    editIcon() {
      if (this.edit == false) {
        getMVAdd({ mvid: this.$route.query.id, t: 0 }).then((data) => {
          console.log(data);
          this.edit = false;
        });
      }
      getMVAdd({ mvid: this.$route.query.id, t: 1 }).then((data) => {
        console.log(data);
        this.edit = true;
      });
    },
    ehot(uids){
      let index = this.hotCom.findIndex(item=>item.commentId == uids);
      this.hotCom[index].liked = ! this.hotCom[index].liked;
      if (!this.editPlayerId.includes(uids)) {
        this.editPlayerId.push(uids);// 记录修改点赞
      }

      // 遍历修改数组记录
      getlikeStar({id:this.$route.query.id,cid:uids,t:1,type:1}).then(data=>{
        console.log(data);
      })

    },
  },
  created() {
    let queryId = this.$route.query;
    console.log(queryId);
    if (!("id" in queryId)) {
      this.$router.push("/video");
    }

    this.$emit("getnavs-btn", false);
    this.$emit("get-hide-play", false);

    getMVDetail({ mvid: queryId.id }).then((data) => {
      //   console.log(data);
      this.mlist = data.data;
      this.mImg = data.data.artists;
      this.mlists = data.data.desc.split("\n");

      getMVSIng({ id: this.mImg[0].id }).then((data) => {
        //   console.log(data);
        this.singIs = data.mvs;
      });
    });

    getMVPlay({ id: queryId.id }).then((data) => {
      //   console.log(data);
      this.mplay = data.data;
    });

    getMVComment({ id: queryId.id }).then((data) => {
      //   console.log(data);
      this.hotCom = data.hotComments;
      this.com = data.comments;
      console.log(this.hotCom);
      console.log(this.com);
    });
  },
  watch: {
    "$route.query"() {
      let queryId = this.$route.query;
      console.log(queryId);
      if (!("id" in queryId)) {
        this.$router.push("/video");
      }

      this.$emit("getnavs-btn", false);

      getMVDetail({ mvid: queryId.id }).then((data) => {
        //   console.log(data);
        this.mlist = data.data;
        this.mImg = data.data.artists;
        this.mlists = data.data.desc.split("\n");

        getMVSIng({ id: this.mImg[0].id }).then((data) => {
          //   console.log(data);
          this.singIs = data.mvs;
        });
      });

      getMVPlay({ id: queryId.id }).then((data) => {
        //   console.log(data);
        //   this.mplay = data.data;
        this.$set(this, "mplay", data.data);
      });
    },
  },
};
</script>

<style lang="less">
.mvplay {
  width: 100%;
  .title {
    width: 100%;
    min-height: 30px;
    line-height: 30px;
    font-size: 20px;
    background-color: #d44439;
    color: #fff;
    text-align: center;
    display: flex;
    padding: 8px 8px;
    box-sizing: border-box;
    .iconfont {
      flex: 0 0 30px;
    }
    p {
      padding-left: 5px;
    }
  }
  .video {
    width: 100%;
    height: auto;

    video {
      width: 100%;
      height: auto;
    }
  }

  .mvsg {
    padding: 15px;
    box-sizing: border-box;
    .mtitle {
      display: flex;
      .img {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        img {
          width: 80px;
          height: 80px;
          border-radius: 50%;
        }
      }
      .mName {
        flex: 1;
        margin-left: 15px;
        line-height: 30px;
        box-sizing: border-box;

        p {
          font-size: 16px;
          //   // 2、让文本不会自动换行 ：
          //   white-space: nowrap;
          //   // 3、让文本溢出隐藏：
          //   overflow: hidden;
          //   // 4、文本溢出时显示省略号：
          //   text-overflow: ellipsis;

          display: -webkit-box;
          // 3、弹性盒子排列方式：垂直排列：
          -webkit-box-orient: vertical;
          // 4、规定显示几行文本：
          -webkit-line-clamp: 1;
          // 5、溢出隐藏：
          overflow: hidden;
        }
      }
      .icon {
        flex: 0 0 40px;
        text-align: center;
        color: #d44439;
        .iconfont {
          font-size: 30px;
          line-height: 50px;
        }
      }
    }
    .desc {
      padding-top: 10px;
      p {
        text-indent: 2em;
        font-size: 16px;
        padding-bottom: 10px;
      }
    }
  }
  .mSing {
    padding: 10px;
    ul {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      li {
        width: 48%;
        padding-bottom: 15px;
        .img {
          width: 100%;
          height: auto;
          img {
            width: 100%;
            height: auto;
          }
        }
        p {
          font-size: 14px;
          // 2、让文本不会自动换行 ：
          white-space: nowrap;
          // 3、让文本溢出隐藏：
          overflow: hidden;
          // 4、文本溢出时显示省略号：
          text-overflow: ellipsis;
        }
      }
    }
  }
  .appraise {
    padding: 10px;
    .hotComment,
    .comment {
      ul {
        li {
          display: flex;
          padding: 15px 0;
          border-bottom: 1px solid #aaa;
          .left {
            padding-right: 10px;
            img {
              width: 90px;
              height: 90px;
            }
          }
          &:last-child {
            border-bottom: 0px;
          }
          .right {
            width: 100%;
            .content {
              p {
                font-size: 14px;
                color: #333;
                span {
                  font-size: 16px;
                  color: #0c73c2;
                }
              }
            }
            .date {
              display: flex;
              justify-content: space-between;
              padding-top: 8px;
              line-height: 25px;
              p {
                font-size: 14px;
                flex: 1;
              }
              .font {
                display: flex;
                span {
                  font-size: 12px;
                }
                .iconfont {
                  color: #0c73c2;
                  font-size: 25px;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>